
<script>
    import 'css/tabpage'
	import 'css/part'
    import axios from 'axios'
    import pagination from 'components/pagination'
    export default{
        components: {
          pagination  
        },
        data(){
            return {
                data:{},
                page:1,
            }
        },
        created () {
            this.getData(1);
        },
        methods: {
            getData(page){
 
                axios.get('static/data/discount/page'+page+'.json')
                .then((data)=>{
                    this.data=data.data
                    
//                  console.log(data.data)
                })
                
            },
            changePage(page){
            	this.getData(page);
            }
        }
    }
</script>

<template>

    <!--注册流程-->
    <div class="htx-common-page pdp-100 clearfix">
        
        <section class="part-left">

        	 <header class="part-header">
                <div class="part-header-slogan">
                    HTX优惠扶持
                </div>
            </header>
             
                
            <!--新闻列表-->
            <div class="news-list">
                <router-link :to="{name:'htxArticle',query:{id:item.id,mdHref:item.markdownHref}}" v-for="item in data.list" :key="item.id" class="news-item">
                    <div class="news-title">
                        {{item.title}}
                    </div>
                    <div class="news-content">
                        {{item.brief}}
                    </div>
                </router-link>
            </div>
            
            <!--页数-->
            <pagination @change="changePage" :total="data.total"></pagination>

        </section>

        <section class="part-right">
            <img src="../img/wechat.png" class="mb-20"/>

            <!-- 最近更新 -->
            <div class="link-box mb-20">
                <header class="part-header part-header-bg">
                        最近更新
                </header>
                <div class="part-content">
                    
                    <router-link :to="{name:'htxArticle',query:{id:item.id,mdHref:item.markdownHref}}" v-for="item in data.newUpdate" :key="item.id" class="part-content-link">
                        {{item.title}}
                    </router-link>
                </div>
            </div>

            <!-- 本类推荐 -->
            <div class="link-box mb-20">
                <header class="part-header part-header-bg">
                        本类推荐
                </header>
                <div class="part-content">
                    <router-link :to="{name:'htxArticle',query:{id:item.id,mdHref:item.markdownHref}}" v-for="item in data.recommend" :key="item.id" class="part-content-link">
                        {{item.title}}
                    </router-link>
                </div>
            </div>

            <!-- 本类排行 -->
            <div class="link-box">
                <header class="part-header part-header-bg">
                        本类排行
                </header>
                <div class="part-content">
                    <router-link :to="{name:'htxArticle',query:{id:item.id,mdHref:item.markdownHref}}" v-for="item in data.rank" :key="item.id" class="part-content-link">
                        {{item.title}}
                    </router-link>
                </div>
            </div>

        </section>
        
    </div>
</template>

<style lang="stylus">
   
    
    
</style>